<template>
  <div class="login_page fillcontain">
    <transition name="form-fade" mode="in-out">
      <section class="form_contianer" v-show="showLogin">

        <div class="header">
          <img :src="logo" />
          <h2>智慧康养平台 - 康养机构</h2>
        </div>

        <div class="banner">

          <div class="form-content">
            <div class="form-box">
              <div class="form-title">
                <h2>直接登录</h2>
                <div class="regist">
                  <el-button type="text" @click="go2Regist">免费注册</el-button>
                </div>
              </div>
              <el-form :model="loginForm" :rules="rules" ref="loginForm">
                <el-form-item prop="username">
                  <el-input class="mobile" v-model="loginForm.username" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    class="password"
                    type="password"
                    placeholder="请输入密码"
                    v-model="loginForm.password"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <div style="float: left; width:161px;">
                    <el-input
                      placeholder="验证码"
                      v-model="loginForm.code"
                      @keyup.enter.native="submitForm('loginForm')"
                    ></el-input>
                  </div>
                  <div style="float: right; height: 46px;">
                    <!-- <img width="125"  height="46" @click="getCode"  v-bind:src="image"  /> -->
                  </div>
                </el-form-item>
                <p class="forgetBtnLine">
                  <el-button class="forgetPassword" type="text" @click="go2forgetPsw">忘记密码</el-button>
                </p>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="submitForm('loginForm')"
                    class="submit_btn"
                    v-loading.fullscreen.lock="fullscreenLoading"
                  >登录</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>

        </div>

      </section>
    </transition>
  </div>
</template>

<script>
import logo from "@/assets/images/common/logo.png";
import * as api from '@/api'
const {role: http} = api.operateSystemMng

export default {
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号码不能为空"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };

    return {
      logo: logo,
      loginForm: {
        username: "",
        password: "",
        code: ""
      },
      rules: {
        username: [{ validator: validatePhone, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        code: [{ validator: validateCode, trigger: "blur" }]
      },
      image: "",
      imageId: "",
      showLogin: false,
      fullscreenLoading: false
    };
  },

  mounted() {
    this.showLogin = true;
    //this.getCode();
  },
  computed: {},

  components: {},
  methods: {
    go2Regist() {
      // this.$router.push( 'regist' )
    },
    go2forgetPsw() {
      //this.$router.push( 'forgetPassword' )
    },
    go2test() {
      //this.$router.push( 'registBusinessInfo' )
    },

    test() {
      //this.fullscreenLoading = true;
    },
    submitForm(formName) {
    
      this.$auth.setToken('token', 'login123456')
      this.fullscreenLoading = true;
      setTimeout(()=> {
        this.$router.push({
        name: 'home'
        },()=>  this.fullscreenLoading = false)
      }, 1000)
      
      this.$refs[formName].validate( valid => {
        if (valid) {
        }
      });
    },
    checkPhone(phone) {
      if (!/^1[0-9]\d{9}$/.test(phone)) {
        this.$message({
          type: "warning",
          message: "请输入正确手机号码!"
        });
        return false;
      }
    },

    //获取验证码
    getCode() {
      // var params = {
      //     //"mobile": this.ruleForm2.pass
      // };
      // loginCode(params,(r) => {
      //     this.testCode=r.data.verifyCode;
      //     this.image = 'data:image/jpg;base64,'+r.data.image
      //     this.imageId = r.data.imageId
      //     //var base64 = data.replace(/^data:image\/\w+;base64,/, "");//去掉图片base64码前面部分data:image/png;base64
      //     //var dataBuffer = new Buffer(r.data.image, 'base64'); //把base64码转成buffer对象，
      //     //console.log('dataBuffer是否是Buffer对象：'+Buffer.isBuffer(dataBuffer));
      // },(r) => {
      //     this.$message({
      //         type: 'error',
      //         message: r.msg
      //     });
      // })
    }
  }
};
</script>

<style lang="scss">
.login_page {
  width: 100%;
  height: 100%;
  background: $menuBg;
  background-size: cover;
  background-position: center center;
  background-image: url('../../../assets/images/common/login.png');
  box-sizing: border-box;
}


.form_contianer {
  .header {
    border-bottom: 1px solid $borderColor;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 100px;
    padding-left: 100px;
    img {
      width: 180px;
      height: 54px;
      margin-right: 20px;
    }
    h2 {
      font-family: MicrosoftYaHei;
      font-size: 20px;
      color: red;
      font-weight: normal;
      line-height: 100px;

      &:before {
        vertical-align: middle;
        content: " ";
        display: inline-block;
        background: red;
        border-radius: 50%;
        width: 6px;
        height: 6px;
        margin: 0 10px;
      }
    }
  }

  .banner {
    min-width: 1140px;
    height: 475px;
    background-size: cover;
    background-position: center center;
     padding-right: 200px;
  }
}

// 表单
.form-box {
  margin-top: 38px;
  float: right;
  width: 346px;
  height: 400px;
  box-sizing: border-box;
  padding: 30px 40px;
  background: $bgWhite;
  border-radius: 4px;
  box-shadow: $baseShadow;
  .el-form-item {
    margin-bottom: 20px;
  }
  .form-title {
    overflow: hidden;
    margin-bottom: 20px;
    h2 {
      float: left;
      font-family: "PingFangSC-Medium";
      font-weight: bold;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      text-align: left;
      line-height: 21px;
    }
    .regist {
      font-size: 14px;
      float: right;
      color: #333333;
      span {
        vertical-align: middle;
      }
      button {
        vertical-align: middle;
        color: #e62730;
        font-size: 14px;
        padding: 0;
      }
    }
  }

  img {
    border-radius: 4px;
  }

  .el-input {
    height: 46px;
    border-color: #dddddd;
    input {
      height: 46px;
    }
  }

  .mobile {
    input {
      padding-left: 42px;
      // background-image: url('../assets/img/userIcon.png');
      background-position: 12px 50%;
      background-repeat: no-repeat;
    }
  }

  .password {
    input {
      padding-left: 42px;
      // background-image: url('../assets/img/passwordIcon.png');
      background-position: 14px 50%;
      background-repeat: no-repeat;
    }
  }
  .forgetBtnLine {
    text-align: right;
    margin-bottom: 20px;
  }
  .forgetPassword {
    padding: 0;
    color: #e62730;
  }

  .submit_btn {
    width: 100%;
    height: 46px;
    background-color: #e62730;
    border-color: #e62730;
  }

  .code_btn {
    width: 100%;
    height: 46px;
    background-color: #0f5aff;
    border-color: #0f5aff;
    &:disabled {
      background-color: #aaaaaa;
      border-color: #aaaaaa;
      color: #ffffff;
    }
  }
}
</style>